<template>
  <div class="catalog-wrap">
		<div class="bg-wrap">
			<div class="bg-leftTop"></div>
			<div class="bg-rightBottom"></div>
		</div>
    <div class="mask-top"></div>
		<y-load-more-remote :request="request" @loaded="handleLoaded"  class="list-wrap" :endTip="isEmpty" ref="listRef">
			<ul>
				<li v-for="(item, index) of listData" :key="item.kid" class="item" 	@click="handleClickCatalog(item)">
						<img :src="item.coverImgUrl" class="item-img">
				</li>
			</ul>
		</y-load-more-remote>
    <div class="lineargradient"></div>
    <div class="bg-bottom">
      <div class="count-down" v-if="isPerpetual">会员到期时间：<span v-if="days > 0"><em >{{completionTime(days)}}</em>天</span><span v-if="hour > 0 || (days > 0 && hour === 0)"><em>{{completionTime(hour)}}</em>小时</span><span v-if="minute > 0"><em>{{completionTime(minute)}}</em>分</span><span v-if="days === 0 && hour === 0 && minute === 0">即将到期</span></div>
      <div class="back-wrap" @click="handleBackHome"><i class="iconfont icon-tuichu"></i> 退出博物馆</div>
		</div>
		<span class="iconfont icon-jiantou animation" v-if="showIcon"></span>
  </div>
</template>
<script>
	import YLoadMoreRemote from '../../components/load-more-remote';
	import {getDateTimeStamp}  from '../../filters/transformTime'
  export default {
		components: {
			YLoadMoreRemote
		},
    data() {
      return {
				listData: [],
				isEmpty: false,
				request: {
					url: '/lovelorn/v1.3/pb/museum-classifys/action/list',
					params: {
						pageSize: 20
					}
				},
				vipDate: {},
				days: '',
				hour: '',
				minute: '',
				isPerpetual: false,
				scroll: 0,
				showIcon: true,
      }
    },
    methods: {
			handleScroll() {
				this.scroll = window.scrollY;
				if (this.scroll + window.innerHeight < document.body.offsetHeight) {
					this.showIcon = true;
				} else {
					this.showIcon = false;
				}
			},
			handleLoaded(list) {
				this.listData.push(...list);
			},
      handleBackHome() {
				this.$router.replace('./museum');
				this.scroll = 0;
      },
      handleClickCatalog(item) {
        this.$router.push( `/catalog-detail/${item.kid}`)
			},
			transformTime() {
				let nowitme = new Date();
				let effectEndTime = this.vipDate.effectEndTime;
				let endTimestamp = getDateTimeStamp(effectEndTime);
				let runTime = (endTimestamp - nowitme.getTime()) / 1000;
				this.days = Math.floor(runTime / 86400);
				runTime = runTime % 86400;
				this.hour = Math.floor(runTime / 3600);
				runTime = runTime % 3600;
				this.minute = Math.floor(runTime / 60);
				this.isPerpetual = true;
			},
			completionTime(time) {
				return time < 10 ? ('0' + time) : time;
			},
			async fetchData() {
				let res = await this.$http.post('/lovelorn/v1.3/pt/museum-orders/action/vip-info');
				this.vipDate = res.data.data;
				if (this.vipDate.vipFlag) {
					this.transformTime();
				} else {
					this.isPerpetual = false;
				}
			},
		},

		// keep-alive加载时调用
		activated() {
			window.addEventListener('scroll', this.handleScroll);
			this.$nextTick(() => {
				window.scrollTo(0, this.scroll);
				this.fetchData();
			})
		},
		deactivated() {
			window.removeEventListener('scroll', this.handleScroll);
		},
    async mounted() {
			window.addEventListener('scroll', this.handleScroll);
			this.fetchData();
    }
  }

</script>
<style>
  .catalog-wrap {
		& .bg-wrap {
			width: 100%;
			height: 100vh;
			position: fixed;
			background: url('./assets/page-bg.png') repeat left top;
			background-size: cover;
			z-index: 1;

			& .bg-leftTop {
				z-index: 1;
				position: absolute;
				top: 0;
				left: 0;
				width: 3.17rem;
				height: 6.55rem;
				background: url('./assets/catalog-left-top.png') no-repeat center;
				background-size: contain;
			}
			
			& .bg-rightBottom {
				z-index: 1;
				position: absolute;
				top: 6.2rem;
				right: 0;
				width: 2.86rem;
				height: 6.02rem;
				background: url('./assets/catalog-right-bottom.png') no-repeat center;
				background-size: contain;
			}
		}

    & .bg-bottom {
      position: fixed;
      bottom: 0;
      left: 0;
      right: 0;
      width: 100%;
      height: 2.09rem;
      background: url('./assets/catalog-bottom.png') no-repeat center;
      background-size: cover;
			padding-top: 0.3rem;
			z-index: 4;

      & .count-down {
        text-align: center;
        font-size: 0.28rem;
        color: #765c37;
        & em {
          color: #ff2323;
        }
      }

      & .back-wrap {
        text-align: center;
        font-size: 0.28rem;
        color: #8d7757;
        display: flex;
        align-items: center;
        justify-content: center;
        margin-top: 0.24rem;

        & .icon-tuichu {
          font-size: 0.36rem;
          margin-right: 0.12rem;
        }
      }
    }

    & .list-wrap {
      height: calc(100% - 3.4rem);
      overflow: scroll;
      padding-bottom: 2.7rem;
			padding-top: 1rem;
			-webkit-overflow-scrolling:touch;
			z-index: 3;
			position: relative;
    }

    & .item {
      margin: 0.2rem auto 0;
      width: 6.17rem;
			height: 2.14rem;

			& .item-img {
				width: 6.17rem;
				height: 2.14rem;
				overflow: hidden;
			}
    }

    & .lineargradient {
      position: fixed;
			bottom: 0;
      z-index: 3;
			width: 100%;
			height: 2.68rem;
			background: url('./assets/catalog-bottom-shadow.png') no-repeat center;
			background-size: cover;
    }

		& .mask-top {
			position: fixed;
			top: 0;
			left: 0;
			z-index: 4;
			width: 100%;
			height: 1.65rem;
			background: url('./assets/catalog-top-shadow.png') no-repeat center;
			background-size: cover;
		}
		& .icon-jiantou {
			font-size: 0.24rem;
			color: #765c37;
			position: fixed;
			bottom: 2rem;
			left: 50%;
			margin-left: -0.12rem;
			z-index: 5;
			&.animation {
				animation-name: points;
				animation-duration: 1.7s;
				animation-delay: 1.2s;
				animation-fill-mode: forwards;
				animation-iteration-count: infinite;
			}
		}
  }
	@keyframes points{
		0%   {bottom:2rem;opacity:0.8}
		50%  {bottom:2.2rem;}
		100% {bottom:2rem;opacity:1}
	}
</style>
